<template>
	<div class="cube" :class="{ 'connected': isConnected, 'active': isActive }">
		<div class="face front">
			<div class="block" :style="{ backgroundColor: faceClass[0] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[1] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[2] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[3] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[4] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[5] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[6] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[7] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[8] || '#ccc' }"></div>
		</div>
		<div class="face back">
			<div class="block" :style="{ backgroundColor: faceClass[27] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[28] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[29] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[30] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[31] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[32] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[33] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[34] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[35] || '#ccc' }"></div>
		</div>
		<div class="face top">
			<div class="block" :style="{ backgroundColor: faceClass[9] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[10] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[11] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[12] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[13] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[14] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[15] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[16] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[17] || '#ccc' }"></div>
		</div>
		<div class="face bottom">
			<div class="block" :style="{ backgroundColor: faceClass[36] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[37] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[38] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[39] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[40] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[41] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[42] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[43] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[44] || '#ccc' }"></div>
	      </div>
	      <div class="face left">
			<div class="block" :style="{ backgroundColor: faceClass[45] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[46] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[47] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[48] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[49] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[50] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[51] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[52] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[53] || '#ccc' }"></div>
		</div>
		<div class="face right">
			<div class="block" :style="{ backgroundColor: faceClass[18] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[19] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[20] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[21] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[22] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[23] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[24] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[25] || '#ccc' }"></div>
			<div class="block" :style="{ backgroundColor: faceClass[26] || '#ccc' }"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		watchEffect,
		computed
	} from 'vue';
	import {
		useCubeStore
	} from '@/stores/cube.js';

	// 定义props
	const props = defineProps({
		cubeFace: {
			type: String,
			default: 'UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB'
		},
		isConnected: {
			type: Boolean,
			default: false
		},
		isActive: {
			type: Boolean,
			default: false
		}
	});

	const faceClass = ref([]);
	const cubeStore = useCubeStore();

	// 计算魔方面状态
	const currentCubeFace = computed(() => {
		return props.cubeFace || cubeStore.cubeFace;
	});

	watchEffect(() => {
		const cubeFace = currentCubeFace.value;
		if (cubeFace && cubeFace.length >= 54) {
			for (let i = 0; i < cubeFace.length; i++) {
				const c = cubeFace[i];
				switch (c) {
					case 'U':
						faceClass.value[i] = '#fff'
						break;
					case 'D':
						faceClass.value[i] = '#ECF035'
						break;
					case 'F':
						faceClass.value[i] = '#02B613'
						break;
					case 'B':
						faceClass.value[i] = '#0061F2'
						break;
					case 'L':
						faceClass.value[i] = '#FF6B00'
						break;
					case 'R':
						faceClass.value[i] = '#D82020'
						break;
					default:
						faceClass.value[i] = '#ccc'
						break;
				}
			}
		}
	});
</script>

<style lang="scss" scoped>
	.cube {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		transform-style: preserve-3d;
		perspective: 5000px;
		perspective-origin: 50% 0px;
		transform: rotateX(-25deg) rotateY(-35deg);
		transition: all 0.3s ease;
		
		&.connected {
			transform: rotateX(-25deg) rotateY(-35deg) scale(1.1);
		}
		
		&.active {
			animation: pulse 2s infinite;
		}
	}

	.block {
		position: absolute;
		width: 34%;
		height: 34%;
		background-color: #fff;
		border: 0px solid #000;
		border-radius: 2px;
		backface-visibility: visible;
		padding: 0;
		margin: 0;
	}

	@keyframes pulse {
		0% {
			transform: rotateX(-25deg) rotateY(-35deg) scale(1);
		}
		50% {
			transform: rotateX(-25deg) rotateY(-35deg) scale(1.05);
		}
		100% {
			transform: rotateX(-25deg) rotateY(-35deg) scale(1);
		}
	}

	.logo {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.face {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #eee;
		border: 0px solid #000;
	}



	.front {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(25px) translateX(0px) translateY(0px);
	}

	.back {
		transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(-25px);
	}

	.top {
		transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(25px);
	}

	.bottom {
		transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(25px);
	}

	.left {
		transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(25px);
	}

	.right {
		transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(25px) translateX(0px) translateY(0px);
	}



	.front .block:nth-child(1) {
		top: 0;
		left: 0;
	}

	.front .block:nth-child(2) {
		top: 0;
		left: 35%;
	}

	.front .block:nth-child(3) {
		top: 0;
		left: 70%;
	}

	.front .block:nth-child(4) {
		top: 35%;
		left: 0;
	}

	.front .block:nth-child(5) {
		top: 35%;
		left: 35%;
	}

	.front .block:nth-child(6) {
		top: 35%;
		left: 70%;
	}

	.front .block:nth-child(7) {
		top: 70%;
		left: 0;
	}

	.front .block:nth-child(8) {
		top: 70%;
		left: 35%;
	}

	.front .block:nth-child(9) {
		top: 70%;
		left: 70%;
	}

	.back .block:nth-child(1) {
		top: 0;
		left: 0;
	}

  .back .block:nth-child(2) {
    top: 0;
    left: 35%;
  }
  
  .back .block:nth-child(3) {
    top: 0;
    left: 70%;
  }
  
  .back .block:nth-child(4) {
    top: 35%;
    left: 0;
  }
  
  .back .block:nth-child(5) {
    top: 35%;
    left: 35%;
  }
  
  .back .block:nth-child(6) {
    top: 35%;
    left: 70%;
  }
  
  .back .block:nth-child(7) {
    top: 70%;
    left: 0;
  }
  
  .back .block:nth-child(8) {
    top: 70%;
    left: 35%;
  }
  
  .back .block:nth-child(9) {
    top: 70%;
    left: 70%;
  }

	.top .block:nth-child(1) {
		top: 0;
		left: 0;
	}

	.top .block:nth-child(2) {
		top: 0;
		left: 35%;
	}

	.top .block:nth-child(3) {
		top: 0;
		left: 70%;
	}

	.top .block:nth-child(4) {
		top: 35%;
		left: 0;
	}

	.top .block:nth-child(5) {
		top: 35%;
		left: 35%;
	}

	.top .block:nth-child(6) {
		top: 35%;
		left: 70%;
	}

	.top .block:nth-child(7) {
		top: 70%;
		left: 0;
	}

	.top .block:nth-child(8) {
		top: 70%;
		left: 35%;
	}

	.top .block:nth-child(9) {
		top: 70%;
		left: 70%;
	}

	.bottom .block:nth-child(1) {
		top: 0;
		left: 0;
	}

  .bottom .block:nth-child(2) {
    top: 0;
    left: 35%;
  }
  
  .bottom .block:nth-child(3) {
    top: 0;
    left: 70%;
  }
  
  .bottom .block:nth-child(4) {
    top: 35%;
    left: 0;
  }
  
  .bottom .block:nth-child(5) {
    top: 35%;
    left: 35%;
  }
  
  .bottom .block:nth-child(6) {
    top: 35%;
    left: 70%;
  }
  
  .bottom .block:nth-child(7) {
    top: 70%;
    left: 0;
  }
  
  .bottom .block:nth-child(8) {
    top: 70%;
    left: 35%;
  }
  
  .bottom .block:nth-child(9) {
    top: 70%;
    left: 70%;
  }
  
  .left .block:nth-child(1) {
    top: 0;
    left: 0;
  }
  
  .left .block:nth-child(2) {
    top: 0;
    left: 35%;
  }
  
  .left .block:nth-child(3) {
    top: 0;
    left: 70%;
  }
  
  .left .block:nth-child(4) {
    top: 35%;
    left: 0;
  }
  
  .left .block:nth-child(5) {
    top: 35%;
    left: 35%;
  }
  
  .left .block:nth-child(6) {
    top: 35%;
    left: 70%;
  }
  
  .left .block:nth-child(7) {
    top: 70%;
    left: 0;
  }
  
  .left .block:nth-child(8) {
    top: 70%;
    left: 35%;
  }
  
  .left .block:nth-child(9) {
    top: 70%;
    left: 70%;
  }
	.right .block:nth-child(1) {
		top: 0;
		left: 0;
	}

	.right .block:nth-child(2) {
		top: 0;
		left: 35%;
	}

	.right .block:nth-child(3) {
		top: 0;
		left: 70%;
	}

	.right .block:nth-child(4) {
		top: 35%;
		left: 0;
	}

	.right .block:nth-child(5) {
		top: 35%;
		left: 35%;
	}

	.right .block:nth-child(6) {
		top: 35%;
		left: 70%;
	}

	.right .block:nth-child(7) {
		top: 70%;
		left: 0;
	}

	.right .block:nth-child(8) {
		top: 70%;
		left: 35%;
	}

	.right .block:nth-child(9) {
		top: 70%;
		left: 70%;
	}




</style>